<template>
  <view>
  <view class="page">
  <view class="justify-start section">
    <view class="section_2">
        <view class="top-box">
          <image :src="imageurl()" class="avatar"></image>
          <view class="nickname">{{userinfo.studentname}}</view>
        </view>


        <image class="self-center image_7" />
      </view>
    </view>
        <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"  ></u-tabs>

  
  </view>

  
  
  <view v-if="current == 0">
  <u-card v-for="(item,index) in user.scStudentCourseList" :key="index" padding="15"    bottomArrange= 15  thumb="/static/iconfont/course.png" :border="false" :title=item.courseName>
   <view class="" slot="body">
    <view>
  		<view class="u-body-item u-flex  u-p-t-0">
  			<view class="u-body-item-title u-line-2">剩余{{item.totalHour-item.balanceHour}}课时</view>
  		</view>
      <view class="u-body-item u-flex  u-col-between u-p-t-0">
      	<view class="u-body-item-title u-line-2">已消耗{{item.balanceHour}}课时/共购买{{item.totalHour}}课时</view>
      </view>
      
      <view class="u-body-item u-flex   u-p-t-0">
      	<view class="u-body-item-title u-line-2">所在班级</view>
      </view>
      <view class="u-body-item u-flex  u-col-between u-p-t-0">
      	<view style="color:#aaaaaa;">{{item.claName}}</view>
      </view>
      </view>
  	</view>
  
  </u-card>
  </view>
  <view v-else-if="current == 1">
    <u-gap height="20" bg-color="#f5f5f5"></u-gap>
     <u-form  class="apply-form-field">
    <u-form-item label="姓名" label-width="150"  right-icon="arrow-right"><span class="form-text">{{user.name}}</span></u-form-item>
    <u-form-item label="性别" label-width="150" right-icon="arrow-right" ><span class="form-text">{{user.sex == '0'?'男':"女"}}</span></u-form-item>
     <u-form-item label="生日" label-width="150" right-icon="arrow-right"><span class="form-text">{{user.birthday}}</span></u-form-item>
      <u-form-item label="年龄" label-width="150" right-icon="arrow-right" ><span class="form-text">{{user.age}}岁</span></u-form-item>
       <u-form-item label="就读学校" label-width="150" right-icon="arrow-right" ><span class="form-text">{{user.school}}</span></u-form-item>
    </u-form> 
     <u-gap height="20" bg-color="#f5f5f5"></u-gap>
     
     
    <u-form  class="apply-form-field">
      <u-form-item label="联系人" label-width="150" style="font-size: 35rpx;align-items: center;text-align: center; justify-content: center;left: 20rpx;font-weight: bold;"></u-form-item>
       <view v-for="(item,indexx) in user.contactList" :key="indexx">
        <u-form-item label="关系" label-width="150"  right-icon="arrow-right"><span class="form-text">{{item.contactRelation}}</span></u-form-item>
        <u-form-item label="昵称" label-width="150"  right-icon="arrow-right"><span class="form-text">{{item.contactNick}}</span></u-form-item>
        <u-form-item label="联席电话" label-width="150"  right-icon="arrow-right"><span class="form-text">{{item.contactPhone}}</span></u-form-item>
        <u-gap height="20" bg-color="#f5f5f5"></u-gap>
      </view>
    </u-form>
    </view>
  </view>
  </view>
  
  
  
  
</template>

<script>
  export default {
    data() {
      return {
        userinfo: '',
        current: 0,
        user: '',
        list: [{
          name: '课程查询'
        }, {
          name: '个人资料',
        }],
      };
    },
    methods : {
      imageurl(){
        if(this.userinfo.avater == ""){
          return require('@/static/common/img/people0' + '.png')
        }
        return this.vuex_config.imgUrl+'/dev-api'+this.userinfo.avater
      },
      change(index) {
        this.current = index;
      },
      
      
    },
    computed: {
      // 将 m_user 模块中的 userinfo 映射到当前页面中使用
    },
    onLoad(option) {
      this.userinfo =  JSON.parse(option.query.data)
      this.$u.api.StudentSingleApp({
        id:this.userinfo.studentId
      }).then(response => {
        if (response.code == 200) {
            this.user = response.data
          }
        else {
          uni.showToast({
            title: '服务器出错',
            icon: 'error'
          })
        }
      })


    }
  }
</script>

<style lang="scss">
  @import '../../../common/uni.css';
  page {
    background-color: #f5f5f5
  }
  .form-text{
    position: absolute;
    color: #7a7a7a ;
    font-size: 32rpx ;
    right: 70rpx;
    }
  .top-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .avatar {
    display: block;
    width: 180rpx;
    height: 180rpx;
    border-radius: 90rpx;
    box-shadow: 0 2rpx 10rpx black;
  }

  .nickname {
    color: #2a2a2a;
    font-weight: 300rpx;
    font-size: 40rpx;
    margin-left: 25rpx;
  }
  .apply-form-field{
  	background: #ffffff;
  	.u-form-item{
  		padding: 10rpx 10rpx 10rpx 28rpx!important;
  	}
  	.input-placeholder{
  		text-align: end!important;
  	}
  	.uni-input-input{
  		text-align: end!important;
  	}
  	.form-field-select{
  		.u-iconfont{
  			font-size: 0!important;
  		}
  	}
  	.add-user{
  		color: #bfbfbf;
  		font-size: 30px;
  	}
  	
  	.apply-name{
  		color: #333333;
  		line-height: 20px;
  		span{
  			color: #999999;
  			display: block;
  			
  		}
  	}
  	.apply-link{
  		.u-link{
  			color: #5ab149!important;
  			padding: 0 5px;
  		}
  	}
  	.u-close--top-right{
  		top:5px!important;
  	}
  	.popup-title{
  		color: #333333;
  		padding:5px 10px;
  		font-size: 30rpx;
  	}
  	.u-cell{
  		padding:8px 12px!important;
  	}
  }




.u-col-between{
   margin-bottom: 20rpx; /* 设置元素底部间距为 20rpx */
}

  .panel-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 13px;
    position: relative;
    top: -10rpx;
    right: -60px;

    .blue-button {
      background-color: #6f8bff;
      color: white;
      padding: 5px 50rpx;
      text-align: center;
      font-size: 12px;
    }
  }



  .ml-5 {
    margin-left: 10rpx;
  }

  .page {
      display: flex;
      flex-direction: column;
    background-color: #ffffff;
    width: 100%;

    .section {
      background-image: url('/static/backgroud/blue.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .section_2 {
        padding: 36rpx 28rpx 0rpx 36rpx;
        background-color: #0000001a;
        display: flex;


        .group {
          padding-left: 32rpx;

          .text {
            color: #ffffff;
            font-size: 30rpx;
            font-family: SourceHanSansCN;
            line-height: 22.76rpx;
          }

          .image {
            width: 34rpx;
            height: 22rpx;
          }

          .image_2 {
            width: 30rpx;
            height: 22rpx;
          }

          .image_3 {
            width: 48rpx;
            height: 22.66rpx;
          }
        }

        .group_2 {
          margin-top: 48rpx;

          .image_4 {
            width: 29.32rpx;
            height: 28rpx;
          }

          .group_3 {
            margin-right: 6rpx;

            .image_5 {
              width: 38rpx;
              height: 34rpx;
            }

            .image_6 {
              width: 30rpx;
              height: 36.66rpx;
            }
          }
        }

        .image_7 {
          margin-top: 280rpx;
          width: 108rpx;
          height: 12rpx;
        }
      }
    }

    .section_3 {
      margin: -20rpx 0 -164rpx;
      padding: 15rpx 32rpx 0;
      background-color: #ffffff;
      border-radius: 20rpx 20rpx 0 0;

      .text-wrapper {
        padding: 12rpx 0;
        background-color: #6f8bff;
        border-radius: 8rpx;
        width: 128rpx;
        height: 48rpx;
      }

      .text-wrapper_2 {
        padding: 12rpx 0;
        background-color: #6f8bff;
        border-radius: 8rpx;
        width: 124rpx;
        height: 48rpx;
      }

      .font {
        font-size: 24rpx;
        font-family: SourceHanSansCN;
        line-height: 22.16rpx;
        color: #ffffff;
      }

      .text-wrapper_3 {
        padding: 12rpx 0;
        background-color: #6f8bff;
        border-radius: 8rpx;
        width: 108rpx;
        height: 48rpx;

        .text_2 {
          line-height: 21.22rpx;
        }
      }

      .group_4 {
        margin-top: 48rpx;

        .text_3 {
          color: #000000;
          font-size: 48rpx;
          font-family: SourceHanSansCN;
          line-height: 44.16rpx;
        }

        .image_8 {
          margin-left: 16rpx;
          width: 32rpx;
          height: 32rpx;
        }

        .image_9 {
          margin-left: 0;
        }

        .text_4 {
          margin-left: 32rpx;
          color: #000000;
          line-height: 31.14rpx;
        }

        .text_5 {
          margin-left: 12rpx;
          color: #a0a0a0;
          font-size: 28rpx;
          font-family: SourceHanSansCN;
          line-height: 29.06rpx;
        }
      }

      .group_5 {
        .group_6 {
          padding: 0 16rpx 12rpx 20rpx;

          .text_6 {
            color: #3e64ff;
          }

          .text_7 {
            line-height: 29.5rpx;
          }
        }

        .divider {
          border-left: solid 160rpx #3e64ff;
          border-right: solid 160rpx #ffffff;
          border-bottom: solid 3rpx #e5e5e5;

          .section_4 {
            margin-left: 262rpx;
            background-color: #ffffff;
            width: 160rpx;
            height: 6rpx;
          }
        }

        .text_8 {
          margin-top: 44rpx;
          line-height: 32.94rpx;
        }

        .group_7 {
          margin: 16rpx 4rpx 0;
          opacity: 0.58;

          .text_9 {
            margin-left: 20rpx;
            color: #000000;
            font-size: 26rpx;
            line-height: 46rpx;
          }

          .text_10 {
            color: #000000;
            font-size: 40rpx;
            font-family: SourceHanSansCN;
            line-height: 46rpx;
          }
        }

        .text_11 {
          margin-top: 16rpx;
          line-height: 33.52rpx;
        }

        .group_8 {
          margin-top: 40rpx;
        }
      }

      .font_2 {
        font-size: 32rpx;
        font-family: SourceHanSansCN;
        line-height: 29.72rpx;
        color: #797979;
      }

      .group_9 {
        margin-top: 60rpx;

        .section_5 {
          padding: 32rpx 0 232rpx;
          border-radius: 20rpx;
          background-color: white;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          height: 384rpx;

          .image_11 {
            margin-right: 32rpx;
          }

          .text-wrapper_4 {
            margin-top: -24rpx;
            padding: 32rpx 0 36rpx;
            background-color: #2b7afb;
            border-radius: 20rpx;
            box-shadow: 0rpx 36rpx 100rpx -24rpx #0648bb4d;

            .text_12 {
              color: #ffffff;
              line-height: 29.66rpx;
            }
          }
        }
      }

      .font_3 {
        font-size: 36rpx;
        font-family: SourceHanSansCN;
        line-height: 33.12rpx;
        color: #000000;
      }

      .image_10 {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
</style>